<template>
	<view class="">
		<view class="main-wrap" :class="{show: loaded}">
			<u-navbar
				title="详情"
				:border-bottom="false"
				:background="background"
				back-icon-color="#ffffff"
				title-color="#ffffff"
			></u-navbar>
			<!-- "status":"状态 0待付款1已付款2待发货3待收货4已委托代售5已收货6申请退款7已退款8已取消"
			"refundStatus":"退款状态 0未申请1申请中2成功3失败" -->
			<view class="swiper-con" style="position: relative;">
				<image src="/static/img/bgr.png" class="swiperImg"></image>
				<view class="order-status" style="position: absolute;">
					<view class="status row">
						<image
							src="/static/img/dengdai.png"
							mode=""
							class="top-icon"
							v-if="dataInfo.status == 0 || dataInfo.status == 1"
						></image>
						<view class="" v-if="current != 5">
							<text v-if="dataInfo.refundStatus == 1">等待平台审核</text>
							<text v-if="dataInfo.status == 5">已完成</text>
							<text v-if="dataInfo.status == 8">已取消</text>
							<text v-if="dataInfo.status == 7">已退款</text>
							<text v-if="dataInfo.status == 4 && dataInfo.refundStatus == 0">已委托代售</text>
							<text v-if="dataInfo.status == 3">待收货</text>
							<text v-if="dataInfo.status == 2">待发货</text>
							<text v-if="dataInfo.status == 1">已付款</text>
							<text v-if="dataInfo.status == 0">等待买家付款</text>
						</view>
						<view class="" v-else>
							<text class="" v-if="dataInfo.status == 0">等待客户付款</text>
							<text class="" v-if="dataInfo.status == 1">已售出,等待客户验收</text>
							<text class="" v-if="dataInfo.status == 2">已售出,客户已验收</text>
							<text v-if="dataInfo.status == 4">已委托代售</text>
							<text class="" v-if="dataInfo.status == 6">客户退款</text>
						</view>
					</view>
					<view class="" style="padding-top: 10upx;" v-if="dataInfo.status == 4 || (current == 5 && dataInfo.status == 1)">
						<view class="status-tips">
							商品本金：￥{{ extractInfo.price }} I 加价：￥{{ extractInfo.addPrice }} I 应实际到账：￥{{
								extractInfo.priceGet
							}}
						</view>
						<view class="status-tips">
							委托售卖平台加价{{ extractInfo.proportion }}%，当用户购买并售卖通过后，则平台抽加价费用的{{
								extractInfo.extractProportion
							}}%
						</view>
						<view
							class="status-btn"
							style="margin:10upx auto;"
							hover-class="hover-opacity"
							@tap="navTo('/pages/public/serveList')"
						>
							联系客服
						</view>
					</view>
					<view class="row between" style="padding-top: 10upx;" v-else>
						<view class="status-tips">
							订单金额：￥{{ dataInfo.realPrice }}
							<text v-if="dataInfo.status == 7">I 退款账户：微信原路返回</text>
						</view>
						<view class="status-btn" hover-class="hover-opacity" @tap="navTo('/pages/public/serveList')">联系客服</view>
					</view>
				</view>
			</view>

			<view class="good-info">
				<view class="address-con">
					<view class="user-info">
						<view class="">
							<text class="user-name">{{ dataInfo.addressName }}</text>
							<text class="user-name">{{ dataInfo.addressPhone }}</text>
						</view>
						<view class="">
							<text class="user-adr">地址：</text>
							<text class="user-adr">{{ dataInfo.addressDetail }}</text>
						</view>
					</view>
					<image src="/static/img/line.png" class="line"></image>
				</view>

				<view class="order-warp" style="margin-top: 20upx;">
					<view class="order-info-con">
						<view class="order-info row between">
							<view class="cart-item-img"><image :src="dataInfo.icon" mode="aspectFill" class="img"></image></view>
							<view class="cart-item-right fill">
								<view class="clamp2 cart-item-title">{{ dataInfo.name }}</view>
								<view class="row between" style="padding-top: 10upx;">
									<view class="cart-item-price">￥{{ dataInfo.price }}</view>
									<view class="cart-item-num">x1</view>
								</view>
							</view>
						</view>
						<view class="row between" style="padding:0 20upx;">
							<view class="order-r-title">订单备注</view>
							<view class="cart-item-num" style="color: #333333;" v-if="dataInfo.remarks && dataInfo.remarks != ''">
								{{ dataInfo.remarks }}
							</view>
							<view class="cart-item-num" style="color: #333333;" v-else>-</view>
						</view>
					</view>
				</view>
				<view class="order-info-con order-warp" style="padding: 20upx 0;">
					<view class="row between order-info-cell">
						<text class="order-time" style="padding-left: 0;">商品小计</text>
						<text class="order-time" style="color: #000000;font-weight: bold;">￥{{ dataInfo.price }}</text>
					</view>
					<view class="row between order-info-cell">
						<text class="order-time" style="padding-left: 0;">运费</text>
						<text class="order-time" style="color:#E9463D;" v-if="dataInfo.freight && dataInfo.freight != 0">
							￥{{ dataInfo.freight }}
						</text>
						<text class="order-time" style="color: #E9463D;" v-else>免运费</text>
					</view>
					<view class="row between order-info-cell b-t">
						<view></view>
						<view>
							<text class="order-time" style="color: #000000;font-weight: bold;">实付费（含运费):</text>
							<text class="order-time" style="color:#E9463D;font-weight: bold;">￥{{ dataInfo.realPrice }}</text>
						</view>
					</view>
				</view>
				<view class="order-info-con" style="padding: 20upx 0;">
					<view class="row order-info-cell">
						<text class="order-label">订单编号:</text>
						<text class="order-time">{{ dataInfo.orderNum }}</text>
					</view>
					<view class="row order-info-cell">
						<text class="order-label">创建时间:</text>
						<text class="order-time">{{ dataInfo.createTime }}</text>
					</view>
					<view class="row order-info-cell" v-if="dataInfo.payTime">
						<text class="order-label">付款时间:</text>
						<text class="order-time">{{ dataInfo.payTime }}</text>
					</view>
					<!-- "status":"状态 0待付款1已付款2待发货3待收货4已委托代售5已收货6申请退款7已退款8已取消"
					"refundStatus":"退款状态 0未申请1申请中2成功3失败" -->
					<view class="row order-info-cell" v-if="dataInfo.entrustTime">
						<text class="order-label">委托代售时间:</text>
						<text class="order-time">{{ dataInfo.entrustTime }}</text>
					</view>
					<view class="row order-info-cell" v-if="dataInfo.receiveTime">
						<text class="order-label">客户验收时间:</text>
						<text class="order-time">{{ dataInfo.receiveTime }}</text>
					</view>
					<view class="row order-info-cell" v-if="dataInfo.completeTime">
						<text class="order-label">完成时间:</text>
						<text class="order-time">{{ dataInfo.completeTime }}</text>
					</view>
					<view class="row order-info-cell" v-if="dataInfo.cancelTime">
						<text class="order-label">取消时间:</text>
						<text class="order-time">{{ dataInfo.cancelTime }}</text>
					</view>
					<view class="row order-info-cell" v-if="dataInfo.refundTime && (dataInfo.status == 6 || dataInfo.status == 7)">
						<text class="order-label">退款时间:</text>
						<text class="order-time">{{ dataInfo.refundTime }}</text>
					</view>
					<view class="row order-info-cell" v-if="dataInfo.status == 7">
						<text class="order-label">审核时间:</text>
						<text class="order-time">{{ dataInfo.checkTime }}</text>
					</view>
					<view class="row order-info-cell" v-if="dataInfo.status == 6 || dataInfo.status == 7">
						<text class="order-label">退款原因:</text>
						<text class="order-time">{{ dataInfo.refundReason }}</text>
					</view>
				</view>
				<view class="count-con row center" style="margin: 20upx 0;" v-if="dataInfo.status == 0 && current != 5">
					<text class="count-text">付款倒计时，过期订单自动取消</text>
					<u-count-down
						:timestamp="timestamp"
						:fontSize="22"
						color="#FA3E35"
						:show-days="false"
						separator="zh"
						separator-size="22"
						separator-color="#FA3E35"
						@end="countDownEnd"
					></u-count-down>
				</view>
			</view>

			<view class="footer-btn b-t" v-if="current != 5">
				<view class="row between btn-con">
					<view class="" style="width: 10%;"></view>
					<view class="row between">
						<view
							class="order-btn one"
							v-if="dataInfo.status == 3"
							hover-class="hover-opacity"
							@tap.stop="
								navTo(
									`/pages/public/subLine?id=${dataInfo.delivery.id}&name=${dataInfo.delivery.corp}&num=${
										dataInfo.deliveryNum
									}`
								)
							"
						>
							查看物流
						</view>
						<view
							class="order-btn one"
							v-if="dataInfo.status == 1"
							hover-class="hover-opacity"
							@tap.stop="navTo(`/pages/order/replayOrder?id=${dataInfo.id}`)"
						>
							申请退款
						</view>
						<view
							class="order-btn one"
							v-if="dataInfo.status == 1"
							hover-class="hover-opacity"
							@tap.stop="entrustSellOrder({id: dataInfo.id, type: 'detail'})"
						>
							委托代售
						</view>
						<view
							class="order-btn one"
							v-if="dataInfo.status == 0"
							hover-class="hover-opacity"
							@tap.stop="cancelOrder({id: dataInfo.id, type: 'detail'})"
						>
							取消订单
						</view>
						<view
							class="order-btn two"
							v-if="dataInfo.status == 0"
							hover-class="hover-opacity"
							@tap.stop="pay({orderNum: dataInfo.orderNum, id: dataInfo.id, type: 'detail', price: dataInfo.realPrice})"
						>
							去付款
						</view>
						<view
							class="order-btn two"
							v-if="dataInfo.status == 3"
							hover-class="hover-opacity"
							@tap.stop="confirmReceipt({id: dataInfo.id, type: 'detail'})"
						>
							确认收货
						</view>
						<view
							class="order-btn two"
							v-if="dataInfo.status == 1"
							hover-class="hover-opacity"
							@tap.stop="requestDeliveryOrder({id: dataInfo.id, type: 'detail'})"
						>
							申请发货
						</view>
						<view
							class="order-btn two"
							v-if="dataInfo.status == 5 || dataInfo.status == 7 || dataInfo.status == 8"
							hover-class="hover-opacity"
							@tap.stop="deleteOrder({id: dataInfo.id, type: 'detail'})"
						>
							删除订单
						</view>
						<view
							class="order-btn two"
							v-if="dataInfo.status == 6 && dataInfo.refundStatus == 1"
							hover-class="hover-opacity"
							@tap.stop="cancelRequestOrder({id: dataInfo.id, type: 'detail'})"
						>
							撤销退款
						</view>
						<view
							class="order-btn two"
							v-if="dataInfo.status == 2"
							hover-class="hover-opacity"
							@tap.stop="cancelDeliveryOrder({id: dataInfo.id, type: 'detail'})"
						>
							取消申请发货
						</view>
					</view>
				</view>
			</view>
		</view>

		<mix-modal
			ref="mixModal"
			:text="modalText"
			:tips="modalTips"
			:item="modalPrice"
			title="订单提示"
			@onConfirm="onModalConfirm"
		></mix-modal>
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
import orderMixins from "./mixin/order.js";
export default {
	mixins: [orderMixins],
	data() {
		return {
			current: 0,
			id: "",
			timestamp: "",
			height: uni.getSystemInfoSync().statusBarHeight + "px",
			background: {
				background: "linear-gradient(124deg, #DE4040, #CC1313)"
			},
			dataInfo: {},
			extractInfo: {}
		};
	},
	onLoad(options) {
		this.id = options.id;
		this.current = options.current;
	},
	onShow() {
		this.loadData();
		this.getGoodsentrust();
	},
	methods: {
		countDownEnd() {
			uni.navigateBack();
		},
		async getGoodsentrust() {
			const res = await this.$request("goods/entrust-before", {
				id: this.id
			});
			if (res.result == 0) {
				// "oldPrice":"商品本金"
				// "addPrice":"平台加价金额"
				// "priceGet":"实际到账金额"
				// "proportion":"加价比例"
				res.data.addPrice = (Number(res.data.price) * Number(res.data.proportion)) / 100;
				res.data.priceGet = (
					Number(res.data.newPrice) -
					(Number(res.data.price) * Number(res.data.proportion) * Number(res.data.extractProportion)) / 10000
				).toFixed(2);
				this.extractInfo = res.data;
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		async loadData() {
			const data = {
				id: this.id
			};
			const res = await this.$request("goods/order-detail", data, {showLoading: true});
			if (res.result == 0) {
				this.timestamp = (new Date(res.data.createTime).getTime() + 60 * 60 * 1000 - new Date().getTime()) / 1000;
				this.dataInfo = res.data;
			} else {
				this.$util.msg(res.resultNote);
			}
		}
	}
};
</script>

<style scoped lang="scss">
.count-con {
	width: 750upx;
	height: 48upx;
	background: #f6f6f6;
}
.count-text {
	font-size: 22upx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #fa3e35;
}
.top-icon {
	width: 40upx;
	height: 42upx;
	margin-right: 20upx;
}
.footer-btn {
	position: fixed;
	bottom: 0;
	width: 100%;
	padding-bottom: var(--safe-area-inset-bottom);
	background: #ffffff;
	z-index: 99;
}
.btn-con {
	height: 88upx;
	padding: 0 20upx;
}
.swiperImg {
	width: 750upx;
	height: 280upx;
	z-index: -1;
}
.order-status {
	padding: 0 20upx;
	top: 30upx;
	width: 100%;
	color: #ffffff;
}
.status {
	font-size: 38upx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #ffffff;
}
.status-tips {
	font-size: 24upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #ffe6e6;
	line-height: 34upx;
}
.status-btn {
	width: 136upx;
	height: 41upx;
	text-align: center;
	line-height: 41upx;
	background: #ffb400;
	border-radius: 21upx;
	font-size: 22upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #000000;
}
.good-info {
	top: 430upx;
	background: #ffffff;
	position: absolute;
	border-radius: 20upx 20upx 0 0;
	padding-bottom: 80px;
	width: 100%;
}
.address-con {
	padding: 30upx 20upx;
	position: relative;
}
.user-name {
	font-size: 24upx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #000000;
}
.user-adr {
	font-size: 24upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #999999;
	display: inline;
}
.line {
	position: absolute;
	bottom: 0;
	left: 5upx;
	width: 740upx;
	height: 6upx;
}
.order-warp {
	border-top: 10upx solid #ededed;
}
.order-info-con {
	border-bottom: 10upx solid #ededed;
}
.order-info-con:last-child {
	border: none;
}
.order-info-cell {
	padding: 14upx 20upx;
}
.order-info {
	padding: 20upx;
}
.cart-item-img {
	width: 164upx;
	height: 164upx;
	border-radius: 10upx;
	overflow: hidden;
}
.img {
	width: 164upx;
	height: 164upx;
}
.cart-item-right {
	padding-left: 20upx;
	height: 164upx;
}
.cart-item-title {
	font-size: 30upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #000000;
	line-height: 36upx;
}
.cart-item-price {
	font-size: 33upx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #cb1414;
	line-height: 36upx;
}
.cart-item-num {
	font-size: 24upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #666666;
	line-height: 36upx;
}
.order-r-title {
	line-height: 80upx;
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #000000;
}
.order-label {
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #666666;
}
.order-time {
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #000000;
	padding-left: 20upx;
}
.order-btn {
	padding: 10upx 36upx;
	text-align: center;
	border-radius: 36upx;
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
}
.one {
	color: #666666;
	border: 1px solid #e7e7e7;
	margin-right: 40upx;
}
.two {
	color: #99130c;
	border: 1px solid #99130c;
}
</style>
